<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			body{
				background-image:url("img/背景.jpg");
				background-repeat:no-repeat;
				background-attachment:fixed;
				background:gainsboro url(img/背景.jpg) no-repeat fixed center/100% 100%;
			}
			.sbox a{
				text-decoration: none;
				color: #ffffff;
				font-size: 25px;
				float: left;
				/* text-align: center; */
				margin: 0 auto;
				margin-left: 22px;
			}
			.sbox{
				width: 100%;
				height:92px ;
			}
			.sbox1{
				margin-top: 50px;
				margin-left: 80px;
			}
			img{
				margin: ;
				float: left;
			}
			.sbox2{
				width: 95px;
				height: 32px;
				border: 1px solid #ffffff;
				margin: auto;
				border-radius: 150px;
				margin-right: 245px;
				margin-top: 10px;
			}
			.sbox3{
				width: 150px;
				height: 32px;
				border: 1px solid #ffffff;
				margin: auto;
				border-radius: 100px;
				margin-top: -35px;
				float: right;
				margin-right: 70px;
				
			}
			.zbox{
				width: 540px;
				height: 660px;
				position: fixed;
				border-radius: 20px;
				background-color: #ffffff;
				top: 35%;
				left: 35%;
			}
			.zbox1{
				margin-top: 45px;
			}
			.zbox1 a{
				text-decoration: none;
				height: 50px;
				font-size:25px;
				color: #000;
				margin-top: 50px;
				margin-left: 30px;
			}
			.zbox2{
				width: 30px;
				height: 5px;
				background-color: #e97e54;
				margin-left: 60px;
				/* margin-top: 72px; */
			}
			.zbox3 a{
				font-size: 25px;
			}
			input{
				width: 460px;
				height: 40px;
				margin-top: 20px;
				margin-left: 30px;
			}
			.zbox4{
				width: 550px;
				height: 45px;
			}
			.zbox4 input{
				width: 20px;
				height: 20px;
			}
			.myl:hover{
				color: #de7b0a;
			}
			.zbox4 a{
				font-size: 15px;
				float: right;
				margin-top: 20px;
				margin-right: 55px;
			}
			.zbox5{
				width: 468px;
				height: 40px;
				margin-top: 20px;
				margin-left: 30px;
				background-color: #de7b0a;
			}
			.xzbox5 a{
				text-decoration: none;
				color: #ffffff;
				font-size: 24px;
				margin-left: 45%;
			}
			.zbox6{
				margin-top: 20px;
				font-size: 24px;
				margin-left: 39%;
			}
			.zbox7{
				width: 468px;
				height: 40px;
				margin-top: 20px;
				margin-left: 30px;
				margin-top: 50px;
			}
			.xzbox7{
				width: 130px;
				height: 30px;
				background-color: #ffffff;
				margin-left: 170px;
				margin-top: -10px;
			}
			.zhxbox{
				height: 1px;
				background-color: #bdbdbd;
				transform-origin: 0 0;
				margin-top: 20px;
				
			}
			.xzbox7 a{
				text-decoration: none;
				color: #bdbdbd;
				font-size: 15px;
				margin-left: 20px;
			}
			.zbox8{
				width: 550px;
				height: 160px;
			}
			.xzbox8{
				width: 100px;
				height: 135px;
				float: left;
				margin-left: 50px;
			}
			.xzbox8 a{
				text-decoration: none;
				color: #bdbdbd;
				font-size: 15px;
				margin-left: 18px;
			}
			.xbox{
				width: 360px;
				height: 200px;
				margin-top: 1000px;
				margin-left:1750px ;
			}
			.xbox a{
				text-decoration: none;
				color: #ffffff;
				font-size: 25px;
			}
			.clear {
				clear: both;
			}
		</style>
	</head>
	<body>
		<div class="sbox">
			<div class="sbox1">
			<img src="img/问卷星.png" class="问卷星"/>
			</div>
			<div class="sbox2">
				<a href="#" >注册</a>
			</div>
			<div class="sbox3">
				<a href="#" >返回首页</a>
			</div>
			<div class="clear"></div>
		</div>
		<div class="zbox">
			<div class="zbox1">
				<a href="#">账号登录</a>
				<a href="#" style="color: #bdbdbb;">验证码登录</a>
			</div>
			<div class="zbox2"></div>
			<div class="zbox3">
				<input type="text" placeholder="用户名/Email/手机" />
				<input type="text" placeholder="请输入登录密码" />
			</div>
			<div class="zbox4">
				<input type="checkbox" name="dl" /><span style="color: #bdbdbd;">下次自动登录</span>
				<a href="#" style="color: black;" class="myl">忘记用户名/密码？</a>
			</div>
			<div class="zbox5">
				<div class="xzbox5">
					<a href="#">登录</a>
				</div>
			</div>
			<div class="zbox6">
				<a href="#">立即注册</a>
			</div>
			<div class="zbox7">
				<div class="zhxbox"></div>
				<div class="xzbox7">
					<a href="#">更多登录方式</a>
				</div>
			</div>
			<div class="zbox8">
				<div class="xzbox8" style="margin-left: 60px;">
				<img src="img/qq.png" class="qq"/>
				<a href="#">QQ登录</a>
				</div>
				<div class="xzbox8">
				<img src="img/weixin.png" class="weixin"/>
				<a href="#">微信登录</a>
				</div>
				<div class="xzbox8" style="">
				<img src="img/qywx.png" class="qywx"/>
				<a href="#">企业微信</a>
				</div>
				<div class="clear"></div>
			</div>
		</div>
		<div class="xbox">
			<a href="#">《登顶武功山》<br />
			拍摄于问卷星团队二月徒步旅行
			</a>
		</div>
	</body>
</html>
